<template>
    <div class="login_container">
        <el-dialog v-model="userStore.visiable" title="用户登录" ref="dialog">
            <!-- 对话框身体部分结构 -->
            <el-row>
                <!-- 左侧结构 -->
                <el-col :span="12">
                    <div class="login">
                        <div v-show="scene == 0">
                            <el-form ref="form" :model="loginParam" :rules="rule">
                                <el-form-item prop="phone">
                                    <el-input v-model="loginParam.phone" placeholder="请输入手机号码"
                                        :prefix-icon="User"></el-input>
                                </el-form-item>
                                <el-form-item prop="code">
                                    <el-input placeholder="请输入手机验证码" :prefix-icon="Lock"
                                        v-model="loginParam.code"></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-button :disabled="!isPhone || flag ? true : false">
                                        <CountDown v-if="flag" :flag="flag" @getFlag="getFlag" />
                                        <span v-else @click="getCode">获取验证码</span>
                                    </el-button>
                                </el-form-item>
                            </el-form>
                            <el-button @click="login" style="width: 100%;" type="primary" size="default"
                                :disabled="!isPhone || loginParam.code.length < 6 ? true : false">用户登录</el-button>
                            <div class="bottom" @click="changeScene">
                                <p>微信扫码登录</p>
                                <svg t="1688184086804" class="icon" viewBox="0 0 1025 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="2323" width="32" height="32">
                                    <path
                                        d="M570.934673 511.510499c-10.21403 0-20.43106 9.482028-20.43106 21.166062 0 9.484028 10.21403 18.967056 20.43106 18.967056 15.332045 0 26.277077-9.484028 26.277077-18.967056C597.21075 520.997526 586.266718 511.510499 570.934673 511.510499L570.934673 511.510499 570.934673 511.510499 570.934673 511.510499zM503.799476 412.98521c16.057047 0 26.271077-10.21403 26.271077-25.546075 0-16.053047-10.21403-25.541075-26.271077-25.541075-15.328045 0-29.925088 9.488028-29.925088 25.541075C473.874388 402.77518 488.471431 412.98521 503.799476 412.98521L503.799476 412.98521 503.799476 412.98521 503.799476 412.98521zM511.826499 63.943187c-247.385725 0-447.935312 200.545588-447.935312 447.930312 0 247.388725 200.549588 447.934312 447.935312 447.934312 247.384725 0 447.929312-200.545588 447.929312-447.934312C959.755812 264.487775 759.215224 63.943187 511.826499 63.943187L511.826499 63.943187 511.826499 63.943187 511.826499 63.943187zM427.167251 625.362832c-27.003079 0-46.708137-4.379013-72.254212-11.684034l-73.710216 37.225109 21.171062-62.765184c-51.817152-36.481107-82.471242-82.463242-82.471242-138.663406 0-99.251291 93.416274-175.148513 207.265607-175.148513 100.711295 0 190.484558 59.840175 207.998609 144.507423-7.301021-1.470004-13.871041-2.196006-19.706058-2.196006-99.256291 0-175.879515 74.440218-175.879515 164.204481 0 15.328045 2.187006 29.193086 5.835017 43.795128C439.580288 625.362832 433.006269 625.362832 427.167251 625.362832L427.167251 625.362832 427.167251 625.362832 427.167251 625.362832zM731.500143 696.881042l14.592043 52.548154-55.464162-31.380092c-21.163062 4.374013-41.600122 10.945032-62.762184 10.945032-97.795287 0-175.153513-67.141197-175.153513-150.33844 0-83.198244 77.358227-150.33844 175.153513-150.33844 92.686272 0 175.883515 67.141197 175.883515 150.33844C803.749355 625.362832 772.368263 666.957954 731.500143 696.881042L731.500143 696.881042 731.500143 696.881042 731.500143 696.881042zM359.296053 361.89806c-15.328045 0-31.380092 9.488028-31.380092 25.541075 0 15.332045 16.053047 25.551075 31.380092 25.551075 14.597043 0 26.271077-10.21903 26.271077-25.551075C385.56713 371.386088 373.893095 361.89806 359.296053 361.89806L359.296053 361.89806 359.296053 361.89806 359.296053 361.89806zM685.518008 511.510499c-10.945032 0-20.43306 9.482028-20.43306 21.166062 0 9.484028 9.488028 18.967056 20.43306 18.967056 14.596043 0 25.545075-9.484028 25.545075-18.967056C711.063083 520.997526 700.114051 511.510499 685.518008 511.510499L685.518008 511.510499 685.518008 511.510499 685.518008 511.510499zM685.518008 511.510499"
                                        fill="#272636" p-id="2324"></path>
                                </svg>
                            </div>
                        </div>
                        <div class="webchat" v-show="scene == 1">
                            <!-- 在这个容器当中显示微信扫码登录页面 -->
                            <div id="login_container"></div>
                            <div class="phone" @click="handler">
                                <p>手机短信验证码登录</p>
                                <svg t="1688354531583" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="2373" width="16" height="16">
                                    <path
                                        d="M820.409449 797.228346q0 25.19685-10.07874 46.866142t-27.716535 38.299213-41.322835 26.204724-50.897638 9.574803l-357.795276 0q-27.212598 0-50.897638-9.574803t-41.322835-26.204724-27.716535-38.299213-10.07874-46.866142l0-675.275591q0-25.19685 10.07874-47.370079t27.716535-38.80315 41.322835-26.204724 50.897638-9.574803l357.795276 0q27.212598 0 50.897638 9.574803t41.322835 26.204724 27.716535 38.80315 10.07874 47.370079l0 675.275591zM738.771654 170.330709l-455.559055 0 0 577.511811 455.559055 0 0-577.511811zM510.992126 776.062992q-21.165354 0-36.787402 15.11811t-15.622047 37.291339q0 21.165354 15.622047 36.787402t36.787402 15.622047q22.173228 0 37.291339-15.622047t15.11811-36.787402q0-22.173228-15.11811-37.291339t-37.291339-15.11811zM591.622047 84.661417q0-8.062992-5.03937-12.598425t-11.086614-4.535433l-128 0q-5.03937 0-10.582677 4.535433t-5.543307 12.598425 5.03937 12.598425 11.086614 4.535433l128 0q6.047244 0 11.086614-4.535433t5.03937-12.598425z"
                                        p-id="2374"></path>
                                </svg>
                            </div>
                        </div>
                    </div>
                </el-col>
                <!-- 右侧结构 -->
                <el-col :span="12">
                    <div class="leftContent">
                        <div class="top">
                            <div class="item">
                                <img src="../../assets/images/code_app.png" alt="">
                                <svg t="1688184296536" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="3439" width="16" height="16">
                                    <path
                                        d="M648.76385 387.55778c9.614985 0 19.127639 0.706081 28.563546 1.757017-25.665543-119.509884-153.434531-208.30421-299.276131-208.30421-163.049516 0-296.611441 111.138216-296.611441 252.264421 0 81.462337 44.436048 148.356886 118.690216 200.24158l-29.66667 89.228207 103.690594-51.997258c37.103036 7.344269 66.871013 14.895245 103.898325 14.895245 9.30697 0 18.537192-0.459464 27.689642-1.178849-5.794983-19.831674-9.152451-40.602743-9.152451-62.153571-0.001023-129.58638 111.279433-234.752582 252.17437-234.752582z m-159.484318-80.422658c22.333658 0 37.128619 14.69263 37.128619 37.012986 0 22.231327-14.794961 37.128619-37.128619 37.128618-22.231327 0-44.537356-14.897292-44.537355-37.128618 0-22.319331 22.307052-37.012985 44.537355-37.012986z m-207.587895 74.141604c-22.228257 0-44.664246-14.897292-44.664246-37.128618 0-22.320355 22.435988-37.012985 44.664246-37.012986 22.230304 0 37.026288 14.69263 37.026288 37.012986 0 22.231327-14.794961 37.128619-37.026288 37.128618z"
                                        fill="#F7D11E" p-id="3440"></path>
                                    <path
                                        d="M170.461323 738.889497c-3.805676 0-7.568373-1.340531-10.564613-3.936659a16.147772 16.147772 0 0 1-4.761444-17.302061l25.922393-77.976956c-75.800383-56.343239-115.76663-127.492696-115.76663-206.398813 0-148.005892 140.30142-268.413216 312.757166-268.413216 151.496389 0 286.130739 93.717452 314.491671 218.451314a16.037255 16.037255 0 0 1 1.146103 6.002714c0 8.919137-7.221472 16.145725-16.145725 16.145725h-0.209778a15.738449 15.738449 0 0 1-1.786693-0.100284c-10.006911-1.11438-18.763342-1.655709-26.773783-1.655709-130.146129 0-236.031714 98.064456-236.031715 218.603786 0 18.937305 2.859118 38.325887 8.493442 57.630559a16.123212 16.123212 0 0 1-2.207272 13.696953 16.126282 16.126282 0 0 1-12.014638 6.92676c-10.490935 0.824785-19.961634 1.224898-28.959565 1.224897-32.755008 0-60.506049-5.697769-89.886193-11.726065-3.847631-0.787946-7.747451-1.592264-11.731182-2.396583l-98.726536 49.510623a16.163121 16.163121 0 0 1-7.245008 1.713015z m207.586872-541.735232c-154.649196 0-280.465716 105.922425-280.465716 236.121766 0 72.252581 37.611619 135.171586 111.793132 187.005114a16.153912 16.153912 0 0 1 6.075369 18.327414l-17.365506 52.222386 68.820412-34.515095a16.084327 16.084327 0 0 1 10.375301-1.408069 2868.182988 2868.182988 0 0 1 17.37574 3.521196c31.272237 6.417153 57.415664 11.789511 90.695628 10.973936-3.258207-15.768125-4.9088-31.540344-4.9088-47.092551 0-138.345881 120.370485-250.895237 268.324188-250.895237 2.270716 0 4.583388 0.036839 6.948249 0.110517-33.878598-100.784404-148.856259-174.371376-277.667997-174.371377zM489.283626 397.424498c-29.1806 0-60.685127-20.366863-60.685128-53.27332 0-32.838919 31.503505-53.163827 60.685128-53.163827 31.367405 0 53.273321 21.858844 53.27332 53.163827 0.001023 31.366382-21.905916 53.273321-53.27332 53.27332z m0-74.144674c-13.707187 0-28.392654 8.388041-28.392654 20.871354 0 12.550851 14.685467 20.98187 28.392654 20.98187 13.328563 0 20.98187-7.647167 20.98187-20.98187 0-13.46057-7.452739-20.871353-20.98187-20.871354zM281.696754 397.424498c-29.244045 0-60.810994-20.366863-60.810995-53.27332 0-32.838919 31.56695-53.163827 60.810995-53.163827 31.30396 0 53.168943 21.858844 53.168943 53.163827 0 31.366382-21.864984 53.273321-53.168943 53.27332z m0-74.144674c-13.770632 0-28.51852 8.388041-28.518521 20.871354 0 12.366655 15.032368 20.98187 28.518521 20.98187 13.266142 0 20.87647-7.647167 20.876469-20.98187 0-13.266142-7.610328-20.871353-20.876469-20.871354z"
                                        fill="#885F44" p-id="3441"></path>
                                    <path
                                        d="M942.566316 631.498628c0-118.587885-118.66668-215.252459-251.945149-215.252459-141.126204 0-252.277724 96.664573-252.277724 215.252459 0 118.792547 111.151519 215.252459 252.277724 215.252459 29.537733 0 59.33027-7.448646 88.997963-14.885012l81.356936 44.551682-22.307052-74.126255c59.538001-44.666292 103.897302-103.897302 103.897302-170.792874z m-333.74006-37.115316c-14.769378 0-29.66667-14.69263-29.66667-29.679973 0-14.779611 14.897292-29.6636 29.66667-29.6636 22.435988 0 37.128619 14.885012 37.128619 29.6636 0 14.987343-14.69263 29.679973-37.128619 29.679973z m163.15287 0c-14.667048 0-29.462009-14.69263-29.462009-29.679973 0-14.779611 14.794961-29.6636 29.462009-29.6636 22.230304 0 37.125549 14.885012 37.125549 29.6636 0 14.987343-14.895245 29.679973-37.125549 29.679973z"
                                        fill="#F7D11E" p-id="3442"></path>
                                    <path
                                        d="M860.981183 892.561435c-2.659573 0-5.329379-0.651846-7.757685-1.98112l-75.810616-41.516556c-28.223808 7.043417-57.310264 13.833053-86.795808 13.833053-148.005892 0-268.418332-103.804181-268.418333-231.396137 0-127.597073 120.41244-231.401254 268.418333-231.401254 145.325853 0 268.092921 105.969497 268.092921 231.401254 0 62.292742-35.897581 124.727723-101.375876 176.777169l19.110244 63.4808a16.130376 16.130376 0 0 1-5.297656 17.197684 16.096607 16.096607 0 0 1-10.165524 3.605107z m-81.361029-76.841085c2.691295 0 5.361101 0.672312 7.757684 1.98112l46.777373 25.617448-10.95347-36.370349a16.147772 16.147772 0 0 1 5.771447-17.570168c62.839187-47.140647 97.444333-103.20964 97.444333-157.876703 0-107.930151-107.987457-199.10878-235.800447-199.10878-130.199341 0-236.126882 89.318258-236.126882 199.10878 0 109.785405 105.927541 199.103664 236.126882 199.103664 27.635407 0 56.837496-7.321756 85.071537-14.400989a16.390295 16.390295 0 0 1 3.931543-0.484023z m-7.642051-205.190289c-23.87271 0-45.610804-21.843494-45.610804-45.825699 0-23.546276 22.168905-45.810349 45.610804-45.810348 29.380144 0 53.273321 20.551058 53.273321 45.810348 0 25.270547-23.893176 45.825698-53.273321 45.825699z m0-59.344597c-5.728468 0-13.31833 7.705496-13.31833 13.517875 0 5.944386 7.462972 13.534248 13.31833 13.534248 13.507642 0 20.98187-8.004301 20.98187-13.534248-0.001023-5.522784-7.474228-13.517875-20.98187-13.517875z m-163.153894 59.344597c-23.977088 0-45.810349-21.843494-45.810348-45.825699 0-23.546276 22.264073-45.810349 45.810348-45.810348 32.902364 0 53.273321 23.777543 53.273321 45.810348 0 22.526039-19.929912 45.825698-53.273321 45.825699z m0-59.344597c-5.813403 0-13.517875 7.705496-13.517875 13.517875 0 5.944386 7.578606 13.534248 13.517875 13.534248 13.68672 0 20.98187-7.857968 20.98187-13.534248-0.001023-5.522784-7.474228-13.517875-20.98187-13.517875z"
                                        fill="#885F44" p-id="3443"></path>
                                </svg>
                                <p>微信扫一扫关注</p>
                                <p>“快速预约挂号”</p>
                            </div>
                            <div class="item">
                                <img src="../../assets/images/code_login_wechat.png" alt="">
                                <svg t="1688184451490" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="4555" width="16" height="16">
                                    <path
                                        d="M820.409449 797.228346q0 25.19685-10.07874 46.866142t-27.716535 38.299213-41.322835 26.204724-50.897638 9.574803l-357.795276 0q-27.212598 0-50.897638-9.574803t-41.322835-26.204724-27.716535-38.299213-10.07874-46.866142l0-675.275591q0-25.19685 10.07874-47.370079t27.716535-38.80315 41.322835-26.204724 50.897638-9.574803l357.795276 0q27.212598 0 50.897638 9.574803t41.322835 26.204724 27.716535 38.80315 10.07874 47.370079l0 675.275591zM738.771654 170.330709l-455.559055 0 0 577.511811 455.559055 0 0-577.511811zM510.992126 776.062992q-21.165354 0-36.787402 15.11811t-15.622047 37.291339q0 21.165354 15.622047 36.787402t36.787402 15.622047q22.173228 0 37.291339-15.622047t15.11811-36.787402q0-22.173228-15.11811-37.291339t-37.291339-15.11811zM591.622047 84.661417q0-8.062992-5.03937-12.598425t-11.086614-4.535433l-128 0q-5.03937 0-10.582677 4.535433t-5.543307 12.598425 5.03937 12.598425 11.086614 4.535433l128 0q6.047244 0 11.086614-4.535433t5.03937-12.598425z"
                                        p-id="4556"></path>
                                </svg>
                                <p>扫一扫下载</p>
                                <p>“预约挂号”APP</p>
                            </div>
                        </div>
                    </div>
                    <p class="tip">尚医通官方指定平台</p>
                    <p class="tip">快速挂号 安全放心</p>
                </el-col>
            </el-row>
            <template #footer>
                <el-button type="primary" size="default" @click="closeDialog">关闭窗口</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { reqWxLogin } from '@/api/hospital/index'
import { User, Lock } from '@element-plus/icons-vue'
import CountDown from '../countdown/index.vue'
import useUserStore from '@/store/modules/user'
import { ref, reactive, computed, watch } from 'vue';
import { ElMessage } from 'element-plus';
import { useRoute, useRouter } from 'vue-router';
let $route = useRoute()
let $router = useRouter()
let userStore = useUserStore()
// 定义一个响应式数据控制倒计时组件显示与隐藏
let flag = ref(false)
let scene = ref(0) //0代表手机号码登录，1代表微信扫码登录
// 获取form表单组件实例
let form = ref()
// 收集表单数据
let loginParam = reactive({
    phone: '',
    code: ''
})
// 计算出当前表单元素收集的内容是不是手机号码格式
let isPhone = computed(() => {
    // 手机号码正则
    const reg = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
    return reg.test(loginParam.phone)

})

// 点击微信扫码登录的回调
const changeScene = async () => {
    scene.value = 1
    // 发请求获取微信扫码二维码需要参数
    // 还需要携带一个参数告诉学校服务器用户授权成功以后重定向项目某一个页面
    let redirect_URL = encodeURIComponent(window.location.origin + '/wxlogin')
    let result = await reqWxLogin(redirect_URL)
    // 生成微信扫码登录二维码页面
    // @ts-ignore
    new WxLogin({
        self_redirect: true, //true：手机点击确认登录后可以在 iframe 内跳转到 redirect_uri
        id: "login_container", //第三方页面显示二维码的容器id
        appid: result.data.appid, //应用唯一标识
        scope: "snsapi_login", //当前微信扫码登录页面已经授权
        redirect_uri: result.data.redirectUri, //填写授权回调域路径，就是用户授权成功以后，微信服务器向公司后台推送code地址
        state: result.data.state, //state是公司服务器重定向的地址携带用户信息
        style: "black",
        href: ""
    });
}

// 获取验证码的回调
const getCode = async () => {
    if (!isPhone.value || flag.value) return
    // 开启倒计时模式
    flag.value = true
    try {
        await userStore.getCode(loginParam.phone)
        loginParam.code = userStore.code
    } catch (error) {
        ElMessage({
            type: 'error',
            message: (error as any).message
        })
    }
}
// 计数器子组件绑定的自定义事件
const getFlag = (val: any) => {
    flag.value = val
}
// 用户点击登录按钮的回调
const login = async () => {
    // 保证表单校验都符合条件
    await form.value.validate()
    try {
        // 用户登录成功
        await userStore.userLogin(loginParam)
        // 关闭对话框
        userStore.visiable = false
        // 获取url的query参数
        let redirect: any = $route.query.redirect
        if (redirect) {
            $router.push(redirect)
        } else {
            $router.push('/home')
        }
    } catch (error) {
        ElMessage({
            type: 'error',
            message: (error as any).message
        })
    }
}
// 手机号码自定义校验规则
const validatorPhone = (_: any, value: any, callback: any) => {
    const reg = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
    if (reg.test(value)) {
        callback()
    } else {
        callback(new Error('请输入正确的手机号码格式'))
    }
}
// 验证码自定义校验规则
const validatorCode = (_: any, value: any, callback: any) => {
    if (/^\d{6}$/.test(value)) {
        callback()
    } else {
        callback(new Error('请输入正确的验证码格式'))
    }
}
// 表单校验规则
const rule = {
    phone: [
        { validator: validatorPhone, trigger: 'blur' }
    ],
    code: [
        { validator: validatorCode, trigger: 'blur' }
    ]
}
// 关闭窗口按钮的回调
const closeDialog = () => {
    userStore.visiable = false
}
// 点击手机短信验证码盒子回调
const handler = () => {
    scene.value = 0
}
// 监听场景的数据
watch(() => scene.value, (val: any) => {
    if (val === 1) {
        userStore.queryState()
    }
})
</script>

<style scoped lang="scss">
.login_container {
    ::v-deep(.el-dialog__body) {
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
    }

    .login {
        padding: 20px;
        border: 1px solid #ccc;

        .webchat {
            display: flex;
            flex-direction: column;
            align-items: center;

            .phone {
                display: flex;
                flex-direction: column;
                align-items: center;

                p {
                    margin: 10px 0px;
                }
            }
        }
    }

    .bottom {
        display: flex;
        flex-direction: column;
        align-items: center;

        p {
            margin: 10px 0;
        }
    }

    .leftContent {
        .top {
            display: flex;
            justify-content: space-around;

            .item {
                display: flex;
                flex-direction: column;
                align-items: center;

                img {
                    width: 130px;
                    height: 130px;
                }

                p {
                    margin: 5px 0px;
                }
            }
        }
    }

    .tip {
        text-align: center;
        margin: 20px 0px;
        font-size: 20px;
        font-weight: 900;
    }
}
</style>